import React, { useEffect } from 'react';
import { Link } from 'react-router-dom';
import {
  Space,
  Card,
  Form,
  Input,
  Select,
  Button,
  Table
} from 'antd';
import CompanySelect from '../../components/select/CompanySelect';
import columns from '../../components/columns/taskColumns';
import { useStore, observer } from '../../store/task/storeHook';
import {
  appTypes,
  booleanOptions,
  executeStatuses,
  taskFrequencies
} from '../../data/statusData';

const TaskList: React.FC = () => {
  const [searchForm] = Form.useForm();
  const store: any = useStore();

  const pagination = {
    showSizeChanger: true,
    showQuickJumper: true,
    pageSizeOptions: [10, 20, 30, 40, 50, 100],
    current: store.task.current + 1,
    pageSize: store.task.pageSize,
    total: store.task.total,
    onChange: (page: number, pageSize: number) => {
      store.task.setPageSize(pageSize);
      search(page - 1);
    },
    onShowSizeChange: (current: number, size: number) => {
      store.task.setPageSize(size);
      search(current - 1);
    }
  };

  const search = (pageNumber: number) => {
    const values = getSearchValues();
    store.task.fetchData(values.keyword, values.company, values.appType, values.active,
      values.frequency, values.lastExecuteStatus, pageNumber);
  };

  const getSearchValues = () => {
    const values: any = searchForm.getFieldsValue(true);
    values.keyword = (values.keyword as string || '').trim();
    return values;
  };

  useEffect(() => {
    const values = store.task.conditions;
    store.task.fetchData(values.keyword, values.company, values.appType, values.active,
      values.frequency, values.lastExecuteStatus, values.pageNumber);
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  return (
    <>
      <Space
        direction="vertical"
        size={[0, 16]}
        style={{ width: '100%', padding: 16 }}
      >
        <Card
          size="small"
          title={
            <Space style={{ paddingTop: 8, paddingBottom: 16 }}>
              <Space.Compact block>
                <Button
                  type="primary"
                  htmlType="button"
                  onClick={() => search(0)}
                >
                  查询
                </Button>
                <Button
                  htmlType="button"
                  onClick={() => store.task.resetConditions(searchForm)}
                >
                  重置
                </Button>
              </Space.Compact>
              <Link to="/task_list/create_task">
                <Button
                  type="primary"
                  htmlType="button"
                >
                  新增
                </Button>
              </Link>
            </Space>
          }
          style={{ paddingTop: 12 }}
        >
          <Form
            form={searchForm}
            name="searchForm"
            autoComplete="off"
            colon={false}
            layout="inline"
            initialValues={store.task.conditions}
            className="search-form"
          >
            <Form.Item
              name="keyword"
              label="关键词"
            >
              <Input
                autoFocus
                maxLength={128}
                placeholder="标题包含关键词"
                style={{ width: 160 }}
              />
            </Form.Item>
            <Form.Item
              name="company"
              label="公司"
            >
              <CompanySelect
                selectId="searchForm_company"
                style={{ width: 240 }}
              />
            </Form.Item>
            <Form.Item
              name="appType"
              label="应用类型"
            >
              <Select
                options={appTypes}
                style={{ width: 100 }}
              />
            </Form.Item>
            <Form.Item
              name="active"
              label="可用"
            >
              <Select
                options={booleanOptions}
                style={{ width: 60 }}
              />
            </Form.Item>
            <Form.Item
              name="frequency"
              label="同步频率"
            >
              <Select
                options={taskFrequencies}
                style={{ width: 80 }}
              />
            </Form.Item>
            <Form.Item
              name="lastExecuteStatus"
              label="最近任务执行状态"
            >
              <Select
                options={executeStatuses}
                style={{ width: 100 }}
              />
            </Form.Item>
          </Form>
        </Card>
        <Table
          columns={columns(booleanOptions, appTypes, taskFrequencies, executeStatuses)}
          dataSource={store.task.data}
          rowKey={record => record.task?.id}
          loading={store.task.loading}
          bordered
          scroll={{ x: 'max-content' }}
          pagination={pagination}
          rowClassName={record => record.task?.active ? '' : 'disabled'}
        />
      </Space>
    </>
  );
};

export default observer(TaskList);
